<script>
import PagePath from "@/components/PagePath.vue";
import elSwitch from "@/views/el-switch.vue";

export default {
  name: "element-ui",
  computed: {
    elSwitch() {
      return elSwitch
    }
  },
  data() {
    return {
      el_button: PagePath.el_button,
      el_link: PagePath.el_link,
      el_radio: PagePath.el_radio,
      el_row_el_col: PagePath.el_row_el_col,
      el_container: PagePath.el_container,
      el_container_example: PagePath.el_container_example,
      el_checkbox: PagePath.el_checkbox,
      el_input: PagePath.el_input,
      el_input_number: PagePath.el_input_number,
      el_switch: PagePath.el_switch,
      el_upload: PagePath.el_upload,
      el_form: PagePath.el_form,
      el_select: PagePath.el_select,
      el_cascader: PagePath.el_cascader,
      el_table: PagePath.el_table,
      crud_query_delete: PagePath.crud_query_delete,
	  el_date_picker:PagePath.el_date_picker,

    }
  }
}

</script>

<!--官网 https://element.eleme.cn/#/zh-CN -->

<template>
  <div>
    <h1>学习ElementUI</h1>
    <el-divider></el-divider>
    <h3 class="elementui_h3">组件</h3>
    <ul id="ullist">
      <li><a v-bind:href="el_row_el_col" target="_blank">Layout 布局</a></li>
      <li><a v-bind:href="el_container" target="_blank">Container 布局容器</a></li>
      <li><a v-bind:href="el_container_example" target="_blank">Container 布局容器 实例</a></li>
      <!--      <li><a href="/el_button" target="_blank">Button</a></li>-->
      <!--      vue基础-指令之v-bind https://blog.csdn.net/Sean_0819/article/details/130189597 -->
      <!--      绑定 a href-->
      <li><a v-bind:href="el_button" target="_blank">Button 按钮</a></li>
      <li><a v-bind:href="el_link" target="_blank">Link 文字链接</a></li>
    </ul>
    <h3 class="elementui_h3">Form</h3>
    <ul id="ullist">
      <li><a v-bind:href="el_radio" target="_blank">Radio 单选框</a></li>
      <li><a v-bind:href="el_checkbox" target="_blank">Checkbox 多选框</a></li>
      <li><a v-bind:href="el_input" target="_blank">Input 输入框</a></li>
      <li><a v-bind:href="el_input_number" target="_blank">InputNumber 计数器</a></li>
      <li><a v-bind:href="el_select" target="_blank">Select 选择器</a></li>
      <li><a v-bind:href="el_cascader" target="_blank">Cascader 级联选择器</a></li>
      <li><a v-bind:href="el_switch" target="_blank">Switch 开关</a></li>
      <li><a v-bind:href="el_upload" target="_blank">Upload 上传</a></li>
      <li><a v-bind:href="el_form" target="_blank">Form 表单</a></li>
	  <li><a v-bind:href="el_date_picker" target="_blank">DatePicker 日期选择器</a></li>
	  </ul>
    </ul>
    <h3 class="elementui_h3">Data</h3>
    <ul id="ullist">
      <li><a v-bind:href="el_table" target="_blank">Table 表格</a></li>
    </ul>

    <h3 class="elementui_h3">结合axios与后端CRUD的实例</h3>
    <ul id="ullist">
      <li><a v-bind:href="crud_query_delete" target="_blank">CRUD实例</a></li>
    </ul>
  </div>
</template>

<style>

.elementui_h3 {
  margin-left: 500px;
  text-align: left;
}

#ullist {
  padding: 0;
  margin-left: 500px;
//list-style-type: none;
}

#ullist li {
//float: left; text-align: left;
}



</style>